<template>
  <div class="existing wd1200">
    <el-row :gutter="20" class="list-box" style="margin-bottom: 20px;">
      <el-col :span="12">
        <el-date-picker
          v-model="month"
          type="month"
          placeholder="选择月"
          clearable
          value-format="yyyy-MM"
          style="width: 100%;"
          :picker-options="pickerOptions"
          @change="dateChange"
        />
      </el-col>
    </el-row>
    <el-row class="list-box" :gutter="20">
      <el-col v-for="(item,index) in list" :key="item.title" :span="12">
        <div class="classify" @click="toUrl(item)">
          <div>
            <img :src="item.icon" alt="">
            <span>{{ item.title }}</span>
          </div>
          <div>
            <span v-loading="loading" class="color-o" style="text-align: end;display: inline-block;min-width: 80px">{{ counts[index] }}家</span>
            <img src="../../../../assets/images/busNeighbors/r.png" alt="" class="right-icon">
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <v-title color="#0071DF" background-color="#E5F2FF" title="近12个月企业变动趋势" />
        <div class="con">
          <p class="m-tit">企业新开设/关闭走势分析</p>
          <vBarCharts v-loading="loading1" :datas="changeData" lengend-data="新增开设企业,关闭企业" />
        </div>
      </el-col>
      <el-col :span="12">
        <v-title color="#0071DF" background-color="#E5F2FF" title="近12个月企业搬入搬出趋势" />
        <div class="con">
          <p class="m-tit">搬入搬出走势分析</p>

          <vBarCharts v-loading="loading1" :datas="inOutData" lengend-data="搬入,搬出" />
        </div>
      </el-col>
      <el-col :span="12">
        <v-title color="#FF8C1A" background-color="#FFF3E8" title="近12个月搬入来源地分析" />
        <div class="con">
          <vHbarCharts v-loading="loading1" color="#5C92FF" :datas="sourceData" title="来源地" />
        </div>
      </el-col>
      <el-col :span="12">
        <v-title color="#FF8C1A" background-color="#FFF3E8" title="近12个月搬出去向地分析" />
        <div class="con">
          <vHbarCharts v-loading="loading1" color="#FF9F40" :datas="targetData" title="去向地" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import vTitle from '@/components/busNeighbors/title'
import vBarCharts from './barCharts.vue'
import vHbarCharts from './hbarCharts.vue'

import { company_base_new_count, company_base_new_not_camp_count, company_bq_count, jc_annual_report_social_security_count, company_base_new_by_month, company_bq_qs_count, company_change_top_in, company_change_top_out } from '@/api/busNeighbors'
export default {
  name: 'Existing',
  components: {
    vTitle, vBarCharts, vHbarCharts
  },
  data() {
    return {
      list: [],
      counts: [],
      changeData: {},
      inOutData: {},
      sourceData: {},
      targetData: {},
      loading: true,
      loading1: true,
      month: this.$dayjs().endOf('month').format('YYYY-MM'),
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  async mounted() {
    this.getLists()
    this.init()
  },
  methods: {
    async init() {
      console.log(this.month, this.$dayjs(this.month).month())
      this.loading = true
      this.loading1 = true
      Promise.all([
        await company_base_new_count({
          establishDateEnd: this.$dayjs(this.month).endOf('month').format('YYYY-MM-DD'),
          establishDateStart: this.$dayjs(this.month).startOf('month').format('YYYY-MM-DD'),
          lyComType: 5,
          lyId: Number(this.$route.query.id)
        }),
        await company_base_new_not_camp_count({
          establishDateEnd: this.$dayjs(this.month).endOf('month').format('YYYY-MM-DD'),
          establishDateStart: this.$dayjs(this.month).startOf('month').format('YYYY-MM-DD'),
          lyComType: 5,
          lyId: Number(this.$route.query.id)
        }),
        await company_bq_count({
          endDate: this.$dayjs(this.month).endOf('month').format('YYYY-MM-DD'),
          lyId: Number(this.$route.query.id),
          startDate: this.$dayjs(this.month).startOf('month').format('YYYY-MM-DD'),
          type: '1'
        }),
        await company_bq_count({
          endDate: this.$dayjs(this.month).endOf('month').format('YYYY-MM-DD'),
          lyId: Number(this.$route.query.id),
          startDate: this.$dayjs(this.month).startOf('month').format('YYYY-MM-DD'),
          type: '2'
        }),
        await jc_annual_report_social_security_count({
          lyComType: 5,
          lyId: Number(this.$route.query.id),
          reportYear: 2023,
          sType: 1
        }),
        await jc_annual_report_social_security_count({
          lyComType: 5,
          lyId: Number(this.$route.query.id),
          reportYear: 2023,
          sType: 2
        })
      ]).then(res => {
        console.log(res)
        this.loading = false
        this.counts = res.map(item => item.data && (item.data.content[0].count || item.data.content[0].total || item.data.content[0].capitalNumTotal) || 0)
      })
      Promise.all([
        await company_base_new_by_month({
          establishDateStart: this.$dayjs(this.month).startOf('month').format('YYYY-MM-DD'),
          establishDateEnd: this.$dayjs(this.month).endOf('month').format('YYYY-MM'),
          lyId: Number(this.$route.query.id)
        }
        ),
        await company_bq_qs_count({
          startDate: this.$dayjs(this.month).startOf('month').format('YYYY-MM-DD'),
          endDate: this.$dayjs(this.month).endOf('month').format('YYYY-MM'),
          lyId: Number(this.$route.query.id)
        }),
        await company_change_top_in({
          startDate: this.$dayjs(this.month).startOf('month').format('YYYY-MM-DD'),
          endDate: this.$dayjs(this.month).endOf('month').format('YYYY-MM-DD'),
          lyComType: 5,
          lyId: Number(this.$route.query.id)
        }),
        await company_change_top_out({
          startDate: this.$dayjs(this.month).startOf('month').format('YYYY-MM-DD'),
          endDate: this.$dayjs(this.month).endOf('month').format('YYYY-MM-DD'),
          lyComType: 5,
          lyId: Number(this.$route.query.id)
        })
      ]).then(res => {
        this.$set(this.changeData, 'name', res[0].data.reverse().filter(item => item.typeName === '在营').map(item => item.establishDate))
        this.$set(this.changeData, 'data1', res[0].data.reverse().filter(item => item.typeName === '在营').map(item => item.total))
        this.$set(this.changeData, 'data2', res[0].data.reverse().filter(item => item.typeName === '非在营').map(item => item.total))
        console.log(this.changeData)
        this.$set(this.inOutData, 'name', res[1].data && res[1].data.reverse().content.filter(item => item.type === '搬入').map(item => item.changeDate))
        this.$set(this.inOutData, 'data1', res[1].data && res[1].data.reverse().content.filter(item => item.type === '搬入').map(item => item.total) || [])
        this.$set(this.inOutData, 'data2', res[1].data && res[1].data.reverse().content.filter(item => item.type === '搬出').map(item => item.total) || [])
        console.log(this.inOutData)
        this.$set(this.sourceData, 'name', res[2].data && res[2].data.content.filter(item => item.type === '搬入').map(item => item.contentAfter) || [])
        this.$set(this.sourceData, 'data1', res[2].data && res[2].data.content.filter(item => item.type === '搬入').map(item => item.total) || [])
        console.log(this.sourceData)
        this.$set(this.targetData, 'name', res[3].data && res[3].data.content.filter(item => item.type === '搬入').map(item => item.contentAfter) || [])
        this.$set(this.targetData, 'data1', res[3].data && res[3].data.content.filter(item => item.type === '搬入').map(item => item.total) || [])
        console.log(this.targetData)
        this.loading1 = false
      })
    },
    toUrl(item) {
      this.$router.push({ path: item.url, query: { data: JSON.stringify(item), companyNames: this.$route.query.name }})
    },
    dateChange() {
      this.getLists()
      this.init()
    },
    getLists() {
      this.list = [{
        icon: require('@/assets/images/busNeighbors/1.png'),
        title: '新开设企业数',
        num: '2000家',
        api: 'company_base_new_list',
        url: '/bus-neighbors/list',
        searchApi: [{
          api: 'company_base_new_chart',
          params: {
            establishDateEnd: this.$dayjs(this.month).endOf('month').format('YYYY-MM-DD'),
            establishDateStart: this.$dayjs(this.month).startOf('month').format('YYYY-MM-DD'),
            lyComType: 5,
            lyId: Number(this.$route.query.id)
          }
        }, {
          api: 'company_base_new_year_count',
          params: {
            establishDateEnd: this.$dayjs(this.month).endOf('month').format('YYYY-MM-DD'),
            establishDateStart: this.$dayjs(this.month).startOf('month').format('YYYY-MM-DD'),
            lyComType: 5,
            lyId: Number(this.$route.query.id)
          }
        }],
        params: {
          establishDateEnd: this.$dayjs(this.month).endOf('month').format('YYYY-MM-DD'),
          establishDateStart: this.$dayjs(this.month).startOf('month').format('YYYY-MM-DD'),
          lyComType: 5,
          lyId: Number(this.$route.query.id),
          pageNumber: 1,
          pageSize: 10
        }
      },
      {
        icon: require('@/assets/images/busNeighbors/2.png'),
        title: '关闭企业数',
        num: '2000家',
        api: 'company_base_new_not_camp_list',
        url: '/bus-neighbors/list',
        searchApi: [{
          api: 'company_base_new_not_camp_chart',
          params: {
            establishDateEnd: this.$dayjs(this.month).endOf('month').format('YYYY-MM-DD'),
            establishDateStart: this.$dayjs(this.month).startOf('month').format('YYYY-MM-DD'),
            lyComType: 5,
            lyId: Number(this.$route.query.id)
          }
        }, {
          api: 'company_base_new_not_camp_year_count',
          params: {
            establishDateEnd: this.$dayjs(this.month).endOf('month').format('YYYY-MM-DD'),
            establishDateStart: this.$dayjs(this.month).startOf('month').format('YYYY-MM-DD'),
            lyComType: 5,
            lyId: Number(this.$route.query.id)
          }
        }],
        params: {
          establishDateEnd: this.$dayjs(this.month).endOf('month').format('YYYY-MM-DD'),
          establishDateStart: this.$dayjs(this.month).startOf('month').format('YYYY-MM-DD'),
          lyComType: 5,
          lyId: Number(this.$route.query.id),
          pageNumber: 1,
          pageSize: 10
        }
      },
      {
        icon: require('@/assets/images/busNeighbors/3.png'),
        title: '搬入企业数',
        num: '2000家',
        api: 'company_bq_list',
        url: '/bus-neighbors/list',
        searchApi: [{
          api: 'company_bq_count_chart',
          params: {
            endDate: this.$dayjs(this.month).endOf('month').format('YYYY-MM-DD'),
            startDate: this.$dayjs(this.month).startOf('month').format('YYYY-MM-DD'),
            lyComType: 5,
            lyId: Number(this.$route.query.id),
            type: '1'
          }
        }, {
          api: 'company_bq_count_year',
          params: {
            endDate: this.$dayjs(this.month).endOf('month').format('YYYY-MM-DD'),
            startDate: this.$dayjs(this.month).startOf('month').format('YYYY-MM-DD'),
            lyComType: 5,
            lyId: Number(this.$route.query.id),
            type: '1'
          }
        }],
        params: {
          endDate: this.$dayjs(this.month).endOf('month').format('YYYY-MM-DD'),
          lyComType: 5,
          lyId: Number(this.$route.query.id),
          pageNumber: 1,
          pageSize: 10,
          startDate: this.$dayjs(this.month).startOf('month').format('YYYY-MM-DD'),
          type: '1'
        }
      },
      {
        icon: require('@/assets/images/busNeighbors/4.png'),
        title: '搬出企业数',
        num: '2000家',
        api: 'company_bq_list',
        url: '/bus-neighbors/list',
        searchApi: [{
          api: 'company_bq_count_chart',
          params: {
            endDate: this.$dayjs(this.month).endOf('month').format('YYYY-MM-DD'),
            startDate: this.$dayjs(this.month).startOf('month').format('YYYY-MM-DD'),
            lyComType: 5,
            lyId: Number(this.$route.query.id),
            type: '2'
          }
        }, {
          api: 'company_bq_count_year',
          params: {
            endDate: this.$dayjs(this.month).endOf('month').format('YYYY-MM-DD'),
            startDate: this.$dayjs(this.month).startOf('month').format('YYYY-MM-DD'),
            lyComType: 5,
            lyId: Number(this.$route.query.id),
            type: '2'
          }
        }],
        params: {
          endDate: this.$dayjs(this.month).endOf('month').format('YYYY-MM-DD'),
          lyComType: 5,
          lyId: Number(this.$route.query.id),
          pageNumber: 1,
          pageSize: 10,
          startDate: this.$dayjs(this.month).startOf('month').format('YYYY-MM-DD'),
          type: '2'
        }
      },
      {
        icon: require('@/assets/images/busNeighbors/5.png'),
        title: '人员增长企业数',
        num: '2000家',
        api: 'jc_annual_report_social_security_list',
        url: '/bus-neighbors/list',
        searchApi: [{
          api: 'jc_annual_report_social_security_ly_capital_count',
          params: {
            lyComType: 5,
            lyId: Number(this.$route.query.id),
            reportYear: this.$dayjs().startOf('year').format('YYYY') - 1,
            sType: 1
          }
        }, {
          api: 'jc_annual_report_social_security_ly_year_count',
          params: {
            endDate: this.$dayjs(this.month).endOf('month').format('YYYY-MM-DD'),
            lyComType: 5,
            lyId: Number(this.$route.query.id),
            reportYear: this.$dayjs().startOf('year').format('YYYY') - 1,
            sType: 1
          }
        }],
        params: {
          lyComType: 5,
          lyId: Number(this.$route.query.id),
          pageNumber: 1,
          pageSize: 10,
          reportYear: this.$dayjs().startOf('year').format('YYYY') - 1,
          sType: 1
        }
      },
      {
        icon: require('@/assets/images/busNeighbors/6.png'),
        title: '人员收缩企业数',
        num: '2000家',
        api: 'jc_annual_report_social_security_list',
        url: '/bus-neighbors/list',
        searchApi: [{
          api: 'jc_annual_report_social_security_ly_capital_count',
          params: {
            lyComType: 5,
            lyId: Number(this.$route.query.id),
            reportYear: this.$dayjs().startOf('year').format('YYYY') - 1,
            sType: 2
          }
        }, {
          api: 'jc_annual_report_social_security_ly_year_count',
          params: {
            endDate: this.$dayjs(this.month).endOf('month').format('YYYY-MM-DD'),
            lyComType: 5,
            lyId: Number(this.$route.query.id),
            reportYear: this.$dayjs().startOf('year').format('YYYY') - 1,
            sType: 2
          }
        }],
        params: {
          lyComType: 5,
          lyId: Number(this.$route.query.id),
          pageNumber: 1,
          pageSize: 10,
          reportYear: 2023,
          sType: 2
        }
      }]
    }
  }
}
</script>
  <style lang="scss" scoped>
  .existing {
    .list-box{
      width: 100%;
      padding-left: 20px;
    }
    .classify{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0 10px 10px;
      background: #FFFFFF;
      border-radius: 6px 6px 6px 6px;
      border: 1px solid #E8EAEC;
      margin-bottom: 20px;
      .right-icon{
        width: 14px;
        height: 14px;
      }
      img{
        width: 24px;
        height: 24px;
        margin-right: 10px;
      }
      div{
        display: flex;
        align-items: center;
        font-size: 13px;
        color: #000000;
      }
      .color-o {
        color: #FF8C1A;
      }
    }
    .con{
      width: 100%;
      border: 1px solid #E8EAEC;
      margin-bottom: 20px;
      // height: 300px;
      .m-tit{
        padding-left: 26px;
        font-weight: 700;
        font-family: PingFang SC, PingFang SC;
      }
    }
  }
  </style>
